<template>
  <div class="user-info-root">
    <div class="avatar-con">
      <user-avatar></user-avatar>
    </div>
    <div class="info-con">
      <user-txt></user-txt>
    </div>
  </div>
</template>

<script>
import UserAvatar from "@/views/mine/components/userAvatar.vue";
import UserTxt from "@/views/mine/components/userTxt.vue";

export default {
  components: {
    UserAvatar,
    UserTxt
  }
}
</script>

<style lang="scss" scoped>
.user-info-root {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: flex;
  padding-bottom: 20px;

  .avatar-con, .info-con {
    height: 100%;
    box-sizing: border-box;
  }

  .avatar-con {
    width:100px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .info-con {
    width: calc(100% - 100px);

  }
}
</style>
